@import '../../mixins'

.inherit-text-styles
  font-family: inherit
  font-size: inherit
  font-weight: inherit
  line-height: inherit
  letter-spacing: inherit
  text-indent: inherit
  text-align: inherit
  color: inherit

.TextInput
  box(relative)
  &.err-animation
    animation: shake-it .3s

.TextInput[data-empty]
  > .placeholder
    opacity: .6
    transform: translateX(0)

.TextInput[data-active]
  > .placeholder
    transform: translateX(3px)

.TextInput > input
.TextInput > textarea
  @extend .inherit-text-styles
  box(relative, block)
  size(100%)
  -webkit-appearance: none
  border: none
  outline: none
  margin: 0
  padding: 0
  background-color: transparent
  resize: none
  z-index: 1

.TextInput > .placeholder
  @extend .inherit-text-styles
  box(absolute)
  pos(0, 0)
  padding: 0
  margin: 0
  opacity: 0
  transform: translateX(16px)
  transition: opacity var(--d-fast), transform var(--d-fast)


@keyframes red-shift
  0%
    opacity: 1
  100%
    opacity: .5

@keyframes shake-it
  0%
    transform: translateX(0)
  20%
    transform: translateX(-12px)
  40%
    transform: translateX(12px)
  55%
    transform: translateX(-8px)
  70%
    transform: translateX(6px)
  80%
    transform: translateX(-4px)
  90%
    transform: translateX(2px)
  100%
    transform: translateX(0)